<template>
    <div class="page-main-login">
        <div class="button">
            <div class="button-switch"></div>
            <div class="button-logo">
                <img src="static/pic/logo.png">
            </div>
            <div class="button-button" v-if="activeName">
                <div class="button-button-input" :class="{active:act_index===1}">
                    <div class="icon icon2"></div>
                    <input
                        style="background-color: rgba(0,0,0,0)"
                        class="button-button-input-in-long"
                        @focus="act_index=1"
                        v-model="name"
                        placeholder="账号"
                    >
                </div>
                <div class="button-button-padding"></div>

                <div class="button-button-input" :class="{active:act_index===2}">
                    <div class="icon icon3"></div>
                    <input
                        style="background-color: rgba(0,0,0,0)"
                        class="button-button-input-in-long"
                        @focus="act_index=2"
                        v-model="password"
                        type="password"
                        placeholder="密码"
                    >
                </div>
                <div class="button-button-padding"></div>

                <div class="button-button-input" :class="{active:act_index===3}">
                    <div class="icon icon4"></div>
                    <input
                       style="background-color: rgba(0,0,0,0)"
                        class="button-button-input-in"
                        @focus="act_index=3"
                        v-model="checkCode"
                        placeholder="请输入验证码"
                    >
                    <div class="button-button-input-check-word" @click="newRandom">
                        <img :src="checkPicSrc + random">
                    </div>
                </div>
                <div class="button-button-padding"></div>

                <div class="button-button-login" @click="login" :class="{active:isClickLogin}">登录</div>
            </div>
        </div>
    </div>
</template>

<script >
//    1、回车登录
//    2、切换员工登录和商家登录
export default {
    data: function () {
        return {
            act_index: 1,
            isClickLogin: false,
            activeName: true,
            name: '',
            password: '',
            workerNum: '',
            checkCode: '',
            checkPicSrc: this.$store.state.IP + '/verifyCode/create?random=',
            random: ''
        }
    },
    components: {
    },
    created () {
        this.random = Math.random().toString()
        // localStorage.lastname = 'Smith'
        this.checkLogin()
        let that = this
        document.onkeypress = function (e) {
            if (that.$store.state.hasLogin) {
                return
            }
            let keycode = document.all ? event.keyCode : e.which
            if (keycode === 13) {
                that.enterButton()
                return false
            }
        }
    },
    watch: {
        activeName () {
            this.name = ''
            this.password = ''
            this.workerNum = ''
            this.checkCode = ''
            this.random = Math.random().toString()
        }
    },
    methods: {
        enterButton () {
            this.login()
        },
        checkLogin () {
            let params = {
                params: {}
            }
            this.$http
                .get(
                    this.$store.state.IP + '/system/isLogin',
                    params
                )
                .then(
                    response => {
                        console.log(
                            '-------------------------------------------'
                        )
                        response = response.body
                        console.log(response)
                        if (response.ret === '0') {
                            if (response.data) {
                                this.getRoleId()
                            } else {
                                let params = {
                                    params: {}
                                }
                                this.$http
                                    .get(
                                        this.$store.state.IP + '/system/getKey',
                                        params
                                    )
                                    .then(
                                        response => {
                                            console.log(
                                                '-------------------------------------------'
                                            )
                                            response = response.body
                                            console.log(response)
                                            if (response.ret === '0') {
                                                console.log('获取KEY成功')
                                                if (response.data) {
                                                    localStorage.AuthorizationTokenKey = response.data
                                                }
                                            }
                                            if (response.ret !== '0') {
                                                console.log('获取KEY失败')
                                            }
                                            console.log(
                                                '******************************************'
                                            )
                                        },
                                        response => {
                                            console.log('通讯失败')
                                        }
                                    )
                            }
                        }
                        if (response.ret !== '0') {
                            console.log('检查登录状态失败')
                        }
                        console.log(
                            '******************************************'
                        )
                    },
                    response => {
                        console.log('通讯失败')
                    }
                )
        },
        getRoleId () {
            this.$http.post(this.$store.state.IP + '/system/company/info', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.$store.dispatch('setHasLogin', true)
                    this.$store.dispatch('setRoleId', response.data.roleId)
                    this.$store.dispatch('setUserName', response.data.userName)
                    this.$store.dispatch('setAgentIdFY', response.data.id)
                    console.log('this.$store.state.roleId')
                    console.log(this.$store.state.roleId)
                }
                if (response.ret !== '0') {
                    if (response.msg === '用户token为空') {
                        this.$store.dispatch('setHasLogin', false)
                    }
                    console.log('调用获取当前用户信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        Trim (str) {
            return str.replace(/(^\s*)|(\s*$)/g, '')
        },
        newRandom () {
            this.random = Math.random().toString()
        },
        clickButton () {
            this.activeName = !this.activeName
        },
        login () {
            this.$store.commit('setHasLogin', true)
            this.$router.replace({
                path: '/mainPage'
            })
            console.log(778)
            // this.isClickLogin = true
            // setTimeout(() => {
            //     this.isClickLogin = false
            // }, 100)
            // let message = ''
            // if (this.checkCode === '') {
            //     message = '请输入验证码'
            // }
            // if (this.password === '') {
            //     message = '请输入密码'
            // }
            // if (this.name === '') {
            //     message = '请输入账号'
            // }
            // if (message !== '') {
            //     this.$message({
            //         message: message,
            //         type: 'warning'
            //     })
            //     return
            // }
            // this.$http.post(this.$store.state.IP + '/system/getloginToken', {
            //     data: {
            //         userName: this.Trim(this.name),
            //         passWord: this.Trim(this.password),
            //         random: this.random,
            //         verifyCode: this.checkCode
            //     }
            // },
            //     {
            //         'emulateJSON': false
            //     }
            // ).then(response => {
            //     console.log('-------------------------------------------')
            //     console.log('调用接口返回成功')
            //     response = response.body
            //     console.log(response)
            //     if (response.ret === '0') {
            //         console.log('调用成功')
            //         console.log(response.data)
            //         // localStorage.AuthorizationToken2 = response.data
            //         localStorage.AuthorizationToken2 = response.data.authorization
            //         this.getRoleId()
            //     }
            //     if (response.ret !== '0') {
            //         this.newRandom()
            //         console.log('调用失败')
            //     }
            //     console.log('兑换积分商品接口结束')
            //     console.log('******************************************')
            // }, response => {
            //     console.log('通讯失败')
            // })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.page-main-login
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

    .button
        position: absolute
        width: 400px
        height: 440px
        left: 50%
        top: 40%
        border-radius: 4px
        transform: translate(-50%, -50%)
        text-align: center

        .button-logo
            margin-left 75px
            width: 250px
            height: 100px
            margin-bottom 15px

            img
                width: 100%
                height: 100%

        .button-switch
            width: 100%
            height: 60px

        .button-button
            width: 300px
            margin-left: 50px
            margin-top: 15px

            .button-button-input
                width: 300px
                height: 40px
                border-radius: 3px
                box-sizing: border-box
                background: url('../../common/pic/input_normal.png')
                background-size: 100% 100%
                position relative
                overflow hidden
                .icon
                    width 20px
                    height 20px
                    left 5px
                    top 10px
                    position absolute
                    &.icon1
                        background: url('../../common/pic/login_home.png')
                        background-size: 100% 100%
                    &.icon2
                        background: url('../../common/pic/login_name.png')
                        background-size: 100% 100%
                    &.icon3
                        background: url('../../common/pic/login_password.png')
                        background-size: 100% 100%
                    &.icon4
                        background: url('../../common/pic/login_check.png')
                        background-size: 100% 100%
                &.active
                    background: url('../../common/pic/input_focus.png')
                    background-size: 100% 100%
                .button-button-input-in-long
                    position absolute
                    left 0
                    top 2px
                    height 36px
                    width 269px
                    background rgba(0,0,0,0)
                    border: 0px
                    outline: none
                    cursor: pointer
                    padding-left: 30px
                    color: #fff
                .button-button-input-in
                    position absolute
                    left 0
                    top 2px
                    height 36px
                    width 169px
                    background rgba(0,0,0,0)
                    border: 0px
                    outline: none
                    cursor: pointer
                    padding-left: 30px
                    color: #fff
                .button-button-input-check-word
                    position absolute
                    right 5px
                    top 5px
                    height: 30px
                    width: 85px

                    img
                        height: 30px
                        width: 85px

            .button-button-padding
                height: 15px

            .button-button-check-left
                display: inline-block
                vertical-align: top
                height: 40px
                width: 195px

            .button-button-check-right
                vertical-align: top
                display: inline-block
                height: 40px
                width: 100px

                img
                    height: 40px
                    width: 100px

            .button-button-login
                width: 100%
                height: 40px
                line-height: 40px
                text-align: center
                color: #fff
                border-radius: 3px
                cursor: pointer
                -webkit-user-select: none
                -moz-user-select: none
                background: url('../../common/pic/login_normal.png')
                background-size: 100% 100%
                &.active
                    background: url('../../common/pic/login_click.png')
                    background-size: 100% 100%
</style>
